<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
    <input id="inp">
    <script>
      // 获取dom节点
      var inp = document.getElementById("inp");
      /*
      var ind = null; //定时器
      inp.addEventListener("input",e=>{
        // 如果有定时器就清除定时
        if(ind){clearTimeout(ind)}
        // 开启定时器
        ind = setTimeout(()=>{
          // 等待一定时间发送ajax
          console.log("发送ajax请求："+inp.value)
          ind = null;
        },260)
       
      })*/
      // 防抖：等待一定时间停止触发事件后，才执行函数
      function debounce(fn,delay=200){
        let timer; //定时器id
        return function(){
          var self  = this; //this指向
          // 如果有定时器就清除定时器
         
          if(timer){clearTimeout(timer)}
          timer = setTimeout(()=>{
            // 等待一定事件执行fn
            // 执行fn，fn的this用self代替，fn参数用上一层函数的arguments参数列表
            fn.apply(self,arguments)
            
          },delay)
        }
      }
      inp.addEventListener("input",debounce(function(e){
        console.log(this,"发送ajax请求："+inp.value,e)
      },500))
      var fun = debounce(function(e){
        console.log(e.pageX,"鼠标位置")
      })
      document.addEventListener("mousemove",fun)
    </script>
</body>
</html>